<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0 user-scalable=no"
    />
    <link rel="stylesheet" href="../src/xr-ui.css" />
    <title>ActionSheet弹出式菜单</title>
  </head>

  <body>
    <div class="xr-content">
      <h1 class="xr-panel-title">ActionSheet弹出式菜单</h1>
      <div class="xr-panel-body">
        <a class="xr-btn" id="js-show">显示弹出式菜单</a>
      </div>
      <div class="xr-action-sheet">
        <div class="xr-mask"></div>
        <div class="xr-action-sheet-wrap">
          <div class="xr-action-sheet-header">
            <h1 class="xr-action-sheet-title">你需要做什么操作？</h1>
          </div>
          <div class="xr-action-sheet-body">
            <a class="xr-action-sheet-menu">收藏</a>
            <a class="xr-action-sheet-menu">关注</a>
            <a class="xr-action-sheet-menu">分享给好友</a>
          </div>
          <div class="xr-action-sheet-footer">
            <a class="xr-action-sheet-menu" id="js-close">取消</a>
          </div>
        </div>
      </div>
    </div>

    <script>
      window.onload = ()=>{
          // 弹出菜单
          document.querySelector('#js-show').onclick = (e) => {
              document.querySelector('.xr-action-sheet').classList.add('show');
          }
          // 收回菜单
          document.querySelector('#js-close').onclick = (e) => {
              document.querySelector('.xr-action-sheet').classList.remove('show');
          }
      };
  </script>
  </body>
</html>
